.checkbox {
  display: inline-block;
  width: 15px;
  height: 15px;
  cursor: pointer;
  user-select: none;

  & input {
    display: none;
    visibility: hidden;
  }

  & span {
    color: var(--color-ultramarine-blue);
    border-radius: var(--border-radius-standard);
    display: block;
    width: 15px;
    height: 15px;
    font-size: 16px;
    background-color: var(--color-white);
    border: solid 1px var(--dark-border-color);

    & img {
      display: none;
    }

    &.accent {
      border: 1px solid var(--color-ultramarine-blue);
      border-radius: calc(var(--border-radius-standard) + 1px);
      box-shadow: 0 0 5px 0 var(--color-ultramarine-blue);
      line-height: 15px !important;
    }

    &.removed {
      border: solid 1px var(--color-burnt-sienna);
      box-shadow: unset;
    }
  }

  & input:checked {
    & ~ span {
      border: none;

      & img {
        display: block;
      }
    }
  }
}
